Implement draggable shapes #660

n-riesco · 2016-06-17T19:53:48Z

Added drag element to shapes
Added tests
Addresses https://github.com/plotly/streambed/issues/1525#issuecomment-225043702

Resubmitted PR after:

removing console.log from tests,
and checking tests pass locally with both Chromium and Firefox.

n-riesco · 2016-06-17T20:13:17Z

I've run the tests locally using the CircleCI configuration (node_modules/.bin/karma start test/jasmine/karma.ciconf.js "tests/shapes_test.js") and they pass.

Any ideas how I can reproduce the failures locally?

* Workaround to failure in CircleCI.

This reverts commit 5a62051.

This reverts commit 2340a96.

n-riesco · 2016-06-17T22:16:56Z

I can reproduce the issue locally by using Firefox 38.0.

n-riesco · 2016-06-17T23:55:01Z

I've fixed the failures in CircleCI!!!
The PR is ready for review.

etpinard · 2016-06-20T16:06:57Z

test/jasmine/tests/shapes_test.js

-            .selectAll('path[data-index="' + index + '"')
-            .node();
+        return d3.selectAll('.shapelayer path').filter(function() {
+            return +this.getAttribute('data-index') === index;


Interesting. Nice find @n-riesco !

* Initiate drag move at the shape centre to avoid resizing the shape.

n-riesco · 2016-06-21T12:44:14Z

TODO

test shape resize
update cursor onmousemove

etpinard · 2016-06-21T14:55:44Z

src/components/shapes/index.js

    }
 }

+function setupDragElement(gd, shapePath, shapeOptions, index) {


I love this. Way to flatten the code. Thanks!

* Defined a test case per direction, because a test case for all directions would timeout before completion.

* Update cursor before drag/resize interactions starts, so that the user knows what interactions will be initiated on click.

* The move drag area may be hidden if a shape is partially visible. In these circumstance users could only resize a shape. * With this commit, users can press the shift key to move a shape regardless of the point where they click.

n-riesco · 2016-06-22T11:32:07Z

I've been thinking of an algorithm to resize path shapes. Here's a simple proposal:

scale the x coordinate by a factor of 1 + dx/element.getBoundingClientRect.width
scale the y coordinate by a factor of 1 + dy/element.getBoundingClientRect.height
limit the scale down element.getBoundingClientRect.width - dx > MINWIDTH
limit the scale down element.getBoundingClientRect.height - dy > MINHEIGHT

etpinard · 2016-06-22T14:09:33Z

src/components/shapes/index.js

+            x = evt.clientX - dragBBox.left,
+            y = evt.clientY - dragBBox.top,
+            cursor = (w > MINWIDTH && h > MINHEIGHT) ?
+                dragElement.getCursor(x / w, 1 - y / h) :


Nicely done here.

etpinard · 2016-06-22T15:01:51Z

src/components/shapes/index.js

+
+    dragElement.init(dragOptions);
+
+    function updateDragMode(evt) {


Great. We should add a setCursor handler for annotations too.

That will deserve a PR of it own. Ticket here: #679

etpinard · 2016-06-22T15:43:26Z

@n-riesco shapes referenced to date axes currently support date string (e.g '2016-06-22') and timestamps (e.g (new Date(2016, 5, 22).getTime()). See example: http://codepen.io/etpinard/pen/oLYEGN

But with { editable: true } dragging the timestamp shape results in

on line

n-riesco · 2016-06-22T16:28:05Z

@etpinard Thx for catching that one! I've just pushed a fix and updated the tests to use both date strings and timestamps.

etpinard · 2016-06-22T16:33:17Z

src/components/shapes/index.js

-    return function(v) { return convertToPx(v.replace('_', ' ')); };
+    return function(v) {
+        if(v.replace) v = v.replace('_', ' ');
+        return convertToPx(v);


etpinard · 2016-06-22T17:13:02Z

Great PR. Thanks @n-riesco 🍻

yogat3ch · 2022-05-11T11:54:01Z

src/components/shapes/index.js

+        moveFn: function(dx, dy) {
+            if(shapeOptions.type === 'path') {
+                var moveX = function moveX(x) { return p2x(x2p(x) + dx); };
+                if(xa && xa.type === 'date') moveX = encodeDate(moveX);


Hi @etpinard,
Is it possible to constrain the drag direction to the x or y plane based on an option value?

n-riesco added 2 commits June 17, 2016 14:50

Shapes: make shapes draggable

aba25e3

test: draggable shapes

2802e0a

n-riesco added 2 commits June 17, 2016 21:44

test: try smaller shape drags

5a62051

* Workaround to failure in CircleCI.

Revert "test: try smaller shape drags"

d923637

This reverts commit 5a62051.

etpinard added feature something new status: in progress labels Jun 17, 2016

n-riesco added 2 commits June 17, 2016 22:00

test: replace MouseEvent with window.MouseEvent

2340a96

Revert "test: replace MouseEvent with window.MouseEvent"

74173b4

This reverts commit 2340a96.

test: compatibility workaround for Firefox 38

0e522a9

etpinard reviewed Jun 20, 2016
View reviewed changes

n-riesco added 5 commits June 21, 2016 10:31

Shapes: rename shapePath to getPathString

d027674

Shapes: add function setupDragElement(node)

9905594

Shapes: add startDrag, moveShape and endDrag

e9f8ac4

Shapes: add line, rect and circle resize

abd8e93

test: Update shape drag test

01903bd

* Initiate drag move at the shape centre to avoid resizing the shape.

etpinard reviewed Jun 21, 2016
View reviewed changes

n-riesco added 4 commits June 22, 2016 11:01

test: shapes are resizeable

2167261

* Defined a test case per direction, because a test case for all directions would timeout before completion.

DragElement: add options.setCursor

82b4102

Shapes: update cursor before drag/resize

ac15570

* Update cursor before drag/resize interactions starts, so that the user knows what interactions will be initiated on click.

Shapes: shiftKey forces move drag mode

5c1ff68

* The move drag area may be hidden if a shape is partially visible. In these circumstance users could only resize a shape. * With this commit, users can press the shift key to move a shape regardless of the point where they click.

etpinard reviewed Jun 22, 2016
View reviewed changes

n-riesco added 2 commits June 22, 2016 17:22

test: draggable shapes referenced to timestamps

e8b587c

Shapes: fix drag of shapes linked to timestamps

5b965ab

etpinard reviewed Jun 22, 2016
View reviewed changes

etpinard added status: reviewable and removed status: in progress labels Jun 22, 2016

etpinard merged commit 050d40c into plotly:master Jun 22, 2016

etpinard mentioned this pull request Jun 23, 2016

Implement resize on editable drag on 'path' type layout shapes #682

Closed

alexcjohnson mentioned this pull request Jun 24, 2016

fix ternary hover after zoom/pan events #688

Merged

yogat3ch reviewed May 11, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement draggable shapes #660

Implement draggable shapes #660

n-riesco commented Jun 17, 2016

n-riesco commented Jun 17, 2016

n-riesco commented Jun 17, 2016

n-riesco commented Jun 17, 2016

etpinard Jun 20, 2016

n-riesco commented Jun 21, 2016 •

edited

Loading

etpinard Jun 21, 2016

n-riesco commented Jun 22, 2016

etpinard Jun 22, 2016

etpinard Jun 22, 2016

etpinard commented Jun 22, 2016 •

edited

Loading

n-riesco commented Jun 22, 2016

etpinard Jun 22, 2016

etpinard commented Jun 22, 2016

yogat3ch May 11, 2022 •

edited

Loading


		dragElement.init(dragOptions);

		function updateDragMode(evt) {

Implement draggable shapes #660

Implement draggable shapes #660

Conversation

n-riesco commented Jun 17, 2016

n-riesco commented Jun 17, 2016

n-riesco commented Jun 17, 2016

n-riesco commented Jun 17, 2016

etpinard Jun 20, 2016

Choose a reason for hiding this comment

n-riesco commented Jun 21, 2016 • edited Loading

TODO

etpinard Jun 21, 2016

Choose a reason for hiding this comment

n-riesco commented Jun 22, 2016

etpinard Jun 22, 2016

Choose a reason for hiding this comment

etpinard Jun 22, 2016

Choose a reason for hiding this comment

etpinard commented Jun 22, 2016 • edited Loading

n-riesco commented Jun 22, 2016

etpinard Jun 22, 2016

Choose a reason for hiding this comment

etpinard commented Jun 22, 2016

yogat3ch May 11, 2022 • edited Loading

Choose a reason for hiding this comment

n-riesco commented Jun 21, 2016 •

edited

Loading

etpinard commented Jun 22, 2016 •

edited

Loading

yogat3ch May 11, 2022 •

edited

Loading